<template>
  <div class="branch-wrap">
    <div class="branch-box-wrap">
      <div class="branch-box">
        <a-button
          class="add-branch"
          type="primary"
          shape="round"
          @click="addTerm"
          >添加条件</a-button
        >
        <div
          class="col-box"
          v-for="(item, index) in nodeConfig.node_conditions"
          :key="index"
        >
          <div class="condition-node">
            <div class="condition-node-box">
              <div class="auto-judge" @click="show(index)">
                <div
                  class="sort-left"
                  v-if="index !== 0"
                  @click.stop="arrTransfer(index, -1)"
                >
                  <icon-left />
                </div>
                <div class="title">
                  <span class="node-title">{{ item.node_name }}</span>
                  <icon-close class="close" @click.stop="delTerm(index)" />
                </div>
                <div class="content">
                  <span v-if="toText(nodeConfig, index)">{{
                    toText(nodeConfig, index)
                  }}</span>
                  <span v-else class="placeholder"> 请设置条件 </span>
                </div>
                <div
                  class="sort-right"
                  v-if="index !== nodeConfig.node_conditions.length - 1"
                  @click.stop="arrTransfer(index)"
                >
                  <icon-right /> </div
                >`
              </div>
              <add-node v-model="item.child_node"></add-node>
            </div>
          </div>
          <slot v-if="item.child_node" :node="item"></slot>
          <div class="top-left-cover-line" v-if="index === 0"></div>
          <div class="bottom-left-cover-line" v-if="index === 0"></div>
          <div
            class="top-right-cover-line"
            v-if="index === nodeConfig.node_conditions.length - 1"
          ></div>
          <div
            class="bottom-right-cover-line"
            v-if="index === nodeConfig.node_conditions.length - 1"
          ></div>
        </div>
      </div>
      <add-node v-model="nodeConfig.child_node"></add-node>
    </div>

    <!--    <el-drawer-->
    <!--        title="条件设置"-->
    <!--        v-model="drawer"-->
    <!--        destroy-on-close-->
    <!--        append-to-body-->
    <!--        :size="600"-->
    <!--    >-->
    <!--      <template #header>-->
    <!--        <div class="node-wrap-drawer__title">-->
    <!--          <label @click="editTitle" v-if="!isEditTitle">-->
    <!--            {{ form.node_name }}-->
    <!--            <div @click="rmConditionGroup(conditionGroup)">-->
    <!--              <el-icon class="node-wrap-drawer__title-edit"-->
    <!--              ><el-icon-edit-->
    <!--              /></el-icon>-->
    <!--            </div>-->
    <!--          </label>-->
    <!--          <el-input-->
    <!--              v-if="isEditTitle"-->
    <!--              ref="nodeTitle"-->
    <!--              v-model="form.node_name"-->
    <!--              clearable-->
    <!--              @blur="saveTitle"-->
    <!--              @keyup.enter="saveTitle"-->
    <!--          ></el-input>-->
    <!--        </div>-->
    <!--      </template>-->
    <!--      <el-container>-->
    <!--        <el-main style="padding: 0 20px 20px 20px">-->
    <!--          <div class="top-tips">满足以下条件时进入当前分支</div>-->
    <!--          <template-->
    <!--              v-for="(conditionGroup, conditionGroupIdx) in form.conditionList"-->
    <!--          >-->
    <!--            <div class="or-branch-link-tip" v-if="conditionGroupIdx != 0">-->
    <!--              或满足-->
    <!--            </div>-->
    <!--            <div class="condition-group-editor">-->
    <!--              <div class="header">-->
    <!--                <span>条件组 {{ conditionGroupIdx + 1 }}</span>-->
    <!--                <div @click="deleteConditionGroup(conditionGroupIdx)">-->
    <!--                  <el-icon class="branch-delete-icon"-->
    <!--                  ><el-icon-delete-->
    <!--                  /></el-icon>-->
    <!--                </div>-->
    <!--              </div>-->

    <!--              <div class="main-content">-->
    <!--                &lt;!&ndash; 单个条件 &ndash;&gt;-->
    <!--                <div class="condition-content-box cell-box">-->
    <!--                  <div>描述</div>-->
    <!--                  <div>条件字段</div>-->
    <!--                  <div>运算符</div>-->
    <!--                  <div>值</div>-->
    <!--                </div>-->
    <!--                <div-->
    <!--                    class="condition-content"-->
    <!--                    v-for="(condition, idx) in conditionGroup"-->
    <!--                >-->
    <!--                  <div class="condition-relation">-->
    <!--                    <span>{{ idx == 0 ? '当' : '且' }}</span>-->
    <!--                    <div @click="deleteConditionList(conditionGroup, idx)">-->
    <!--                      <el-icon class="branch-delete-icon"-->
    <!--                      ><el-icon-delete-->
    <!--                      /></el-icon>-->
    <!--                    </div>-->
    <!--                  </div>-->
    <!--                  <div class="condition-content">-->
    <!--                    <div class="condition-content-box">-->
    <!--                      <el-input v-model="condition.label" placeholder="描述" />-->
    <!--                      <el-input-->
    <!--                          v-model="condition.field"-->
    <!--                          placeholder="条件字段"-->
    <!--                      />-->
    <!--                      <el-selectPolicy-->
    <!--                          v-model="condition.operator"-->
    <!--                          placeholder="Select"-->
    <!--                      >-->
    <!--                        <el-option label="等于" value="=="></el-option>-->
    <!--                        <el-option label="不等于" value="!="></el-option>-->
    <!--                        <el-option label="大于" value=">"></el-option>-->
    <!--                        <el-option label="大于等于" value=">="></el-option>-->
    <!--                        <el-option label="小于" value="<"></el-option>-->
    <!--                        <el-option label="小于等于" value="<="></el-option>-->
    <!--                        <el-option label="包含" value="include"></el-option>-->
    <!--                        <el-option-->
    <!--                            label="不包含"-->
    <!--                            value="notinclude"-->
    <!--                        ></el-option>-->
    <!--                      </el-selectPolicy>-->
    <!--                      <el-input v-model="condition.value" placeholder="值" />-->
    <!--                    </div>-->
    <!--                  </div>-->
    <!--                </div>-->
    <!--              </div>-->
    <!--              <div class="sub-content">-->
    <!--                <el-button-->
    <!--                    link-->
    <!--                    type="primary"-->
    <!--                    @click="addConditionList(conditionGroup)"-->
    <!--                    icon="el-icon-plus"-->
    <!--                >-->
    <!--                  添加条件-->
    <!--                </el-button>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--          </template>-->
    <!--          <el-button-->
    <!--              style="width: 100%"-->
    <!--              type="info"-->
    <!--              icon="el-icon-plus"-->
    <!--              text-->
    <!--              bg-->
    <!--              @click="addConditionGroup"-->
    <!--          >-->
    <!--            添加条件组-->
    <!--          </el-button>-->
    <!--        </el-main>-->
    <!--        <el-footer>-->
    <!--          <el-button type="primary" @click="save"> 保存 </el-button>-->
    <!--          <el-button @click="drawer = false">取消</el-button>-->
    <!--        </el-footer>-->
    <!--      </el-container>-->
    <!--    </el-drawer>-->

    <!--    <div class="node-wrap-drawer__title">-->
    <!--      <label @click="editTitle" v-if="!isEditTitle">-->
    <!--        {{ form.node_name }}-->
    <!--        <div @click="rmConditionGroup(conditionGroup)">-->
    <!--          <el-icon class="node-wrap-drawer__title-edit"-->
    <!--          ><el-icon-edit-->
    <!--          /></el-icon>-->
    <!--        </div>-->
    <!--      </label>-->
    <!--      <el-input-->
    <!--          v-if="isEditTitle"-->
    <!--          ref="nodeTitle"-->
    <!--          v-model="form.node_name"-->
    <!--          clearable-->
    <!--          @blur="saveTitle"-->
    <!--          @keyup.enter="saveTitle"-->
    <!--      ></el-input>-->
    <!--    </div>-->
    <a-drawer title="条件设置" :visible="drawer" :width="700" :footer="false">
      <template #header>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
          "
        >
          <div class="node-wrap-drawer__title">
            <label @click="editTitle" v-if="!isEditTitle"
              >{{ form.node_name }}
              <icon-edit />
            </label>
            <a-input
              allow-clear
              v-if="isEditTitle"
              ref="nodeTitle"
              v-model="form.node_name"
              :style="{ width: '320px' }"
              @blur="saveTitle"
              @press-enter="saveTitle"
            />
          </div>
          <div
            style="cursor: pointer"
            @click="
              () => {
                drawer = false;
              }
            "
          >
            <icon-close size="15"
          /></div>
        </div>
      </template>
      <a-form ref="formRef" :model="form">
        <a-form-item label="节点类型" style="margin-left: -40px">
          <a-tag field="node_type" color="green" style="margin-right: 20px">
            <span style="color: green">条件节点</span>
          </a-tag>
        </a-form-item>
        <div>
          <div class="des1">满足以下条件时进入当前分支</div>
          <div v-for="(conditionList, index) in form.condition_list">
            <div v-if="index !== 0" class="des2"> 或满足 </div>
            <a-card
              :header-style="{
                background: '#F4F6F8',
                height: '40px',
              }"
              style="width: 95%"
              class="card-demo"
              :title="`条件组${index + 1}`"
              hoverable
            >
              <template #extra>
                <icon-delete
                  @click="deleteConditionGroup(index)"
                  style="color: #4e5969; font-size: 20px"
                />
              </template>
              <div class="contentBox">
                <a-row :span="24">
                  <a-col :span="6" class="title">描述</a-col>
                  <a-col :span="6" class="title">条件字段</a-col>
                  <a-col :span="6" class="title">运算符</a-col>
                  <a-col :span="6" class="title">值</a-col>
                </a-row>
                <div style="margin-top: 15px">
                  <a-row
                    :span="24"
                    style="margin-top: 5px"
                    v-for="(citm, cindex) in conditionList"
                  >
                    <a-col :span="24" class="contentBoxList">
                      <span>{{ cindex === 0 ? '当' : '且' }}</span>
                      <icon-delete
                        @click="deleteConditionList(conditionList, cindex)"
                      />
                    </a-col>
                    <a-row :span="24" :gutter="10" style="margin-top: 10px">
                      <a-col :span="7">
                        <a-input
                          placeholder="描述"
                          v-model="citm.label"
                          allow-clear
                      /></a-col>
                      <a-col :span="6">
                        <a-select placeholder="条件字段" v-model="citm.field">
                          <a-option
                            v-for="(item, index) of store.appConditions"
                            :key="item + index"
                            :value="item.field_name"
                          >
                            {{ item.field_desc }}
                          </a-option>
                        </a-select>
                      </a-col>
                      <a-col :span="5" class="title">
                        <a-select placeholder="运算符" v-model="citm.operator">
                          <a-option
                            v-for="(item, index) in operatorOptions"
                            :value="item.value"
                            >{{ item.label }}</a-option
                          >
                        </a-select></a-col
                      >
                      <a-col :span="6" class="title">
                        <a-input
                          placeholder="值"
                          allow-clear
                          v-model="citm.value"
                      /></a-col>
                    </a-row>
                    <a-row style="margin-top: 10px">
                      <a-link @click="addConditionList(conditionList)">
                        <template #icon>
                          <icon-plus />
                        </template>
                        添加条件
                      </a-link>
                    </a-row>
                  </a-row>
                </div>
              </div>
            </a-card>
          </div>
          <!--  条件组 -->
          <a-button
            long
            style="width: 95%; margin: 0 auto; margin-left: 27px"
            @click="addConditionGroup"
          >
            <template #icon><icon-plus /></template>
            添加条件组</a-button
          >
        </div>
        <a-form-item style="margin-top: 30px">
          <a-space>
            <a-button html-type="submit" type="primary" @click="save"
              >保存</a-button
            >
            <a-button @click="$refs.formRef.resetFields()">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-drawer>
  </div>
</template>

<script>
  import addNode from './addNode.vue';
  import { useAppStore } from '@/store';

  export default {
    props: {
      modelValue: { type: Object, default: () => {} },
    },
    components: {
      addNode,
    },
    data() {
      return {
        nodeConfig: {},
        drawer: false,
        isEditTitle: false,
        index: 0,
        store: useAppStore(),
        form: {},
        operatorOptions: [
          {
            value: '==',
            label: '等于',
          },
          {
            value: '!=',
            label: '不等于',
          },
          {
            value: '>',
            label: '大于',
          },
          {
            value: '>=',
            label: '大于等于',
          },
          {
            value: '<',
            label: '小于',
          },
          {
            value: '<=',
            label: '小于等于',
          },
        ],
      };
    },
    watch: {
      modelValue() {
        this.nodeConfig = this.modelValue;
      },
    },
    mounted() {
      this.nodeConfig = this.modelValue;
    },
    methods: {
      show(index) {
        this.nodeConfig = this.modelValue;
        this.index = index;
        this.form = {};
        this.form = JSON.parse(
          JSON.stringify(this.nodeConfig.node_conditions[index])
        );
        this.drawer = true;
      },
      editTitle() {
        this.isEditTitle = true;
        this.$nextTick(() => {
          this.$refs.nodeTitle.focus();
        });
      },
      saveTitle() {
        this.isEditTitle = false;
      },
      save() {
        this.nodeConfig.node_conditions[this.index] = this.form;
        this.$emit('update:modelValue', this.nodeConfig);
        this.drawer = false;
      },
      addTerm() {
        let len = this.nodeConfig.node_conditions.length + 1;
        this.nodeConfig.node_conditions.push({
          node_name: '条件' + len,
          type: 3,
          condition_list: [],
        });
      },
      delTerm(index) {
        this.nodeConfig.node_conditions.splice(index, 1);
        if (this.nodeConfig.node_conditions.length == 1) {
          if (this.nodeConfig.child_node) {
            if (this.nodeConfig.node_conditions[0].child_node) {
              this.reData(
                this.nodeConfig.node_conditions[0].child_node,
                this.nodeConfig.child_node
              );
            } else {
              this.nodeConfig.node_conditions[0].childNode =
                this.nodeConfig.child_node;
            }
          }
          this.$emit(
            'update:modelValue',
            this.nodeConfig.node_conditions[0].child_node
          );
        }
      },
      reData(data, addData) {
        if (!data.child_node) {
          data.child_node = addData;
        } else {
          this.reData(data.child_node, addData);
        }
      },
      arrTransfer(index, type = 1) {
        this.nodeConfig.node_conditions[index] =
          this.nodeConfig.node_conditions.splice(
            index + type,
            1,
            this.nodeConfig.node_conditions[index]
          )[0];
        this.$emit('update:modelValue', this.nodeConfig);
      },
      addConditionList(condition_list) {
        condition_list.push({
          label: '',
          field: '',
          operator: '=',
          value: '',
        });
      },
      deleteConditionList(condition_list, index) {
        condition_list.splice(index, 1);
      },
      addConditionGroup() {
        this.addConditionList(
          this.form.condition_list[this.form.condition_list.push([]) - 1]
        );
      },
      deleteConditionGroup(index) {
        this.form.condition_list.splice(index, 1);
      },
      toText(nodeConfig, index) {
        var { condition_list } = nodeConfig.node_conditions[index];
        if (condition_list && condition_list.length == 1) {
          const text = condition_list
            .map((conditionGroup) =>
              conditionGroup.map(
                (item) => `${item.label}${item.operator}${item.value}`
              )
            )
            .join(' 和 ');
          return text;
        } else if (condition_list && condition_list.length > 1) {
          return condition_list.length + '个条件，或满足';
        } else {
          if (index == nodeConfig.node_conditions.length - 1) {
            return '其他条件进入此流程';
          } else {
            return false;
          }
        }
      },
    },
  };
</script>

<style scoped lang="less">
  .top-tips {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    color: #646a73;
  }

  .or-branch-link-tip {
    margin: 10px 0;
    color: #646a73;
  }

  .condition-group-editor {
    user-select: none;
    border-radius: 4px;
    border: 1px solid #e4e5e7;
    position: relative;
    margin-bottom: 16px;

    .branch-delete-icon {
      font-size: 18px;
    }

    .header {
      background-color: #f4f6f8;
      padding: 0 12px;
      font-size: 14px;
      color: #171e31;
      height: 36px;
      display: flex;
      align-items: center;

      span {
        flex: 1;
      }
    }

    .main-content {
      padding: 0 12px;

      .condition-relation {
        color: #9ca2a9;
        display: flex;
        align-items: center;
        height: 36px;
        display: flex;
        justify-content: space-between;
        padding: 0 2px;
      }

      .condition-content-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        div {
          width: 100%;
          min-width: 120px;
        }

        div:not(:first-child) {
          margin-left: 16px;
        }
      }

      .cell-box {
        div {
          padding: 16px 0;
          width: 100%;
          min-width: 120px;
          color: #909399;
          font-size: 14px;
          font-weight: 600;
          text-align: center;
        }
      }

      .condition-content {
        display: flex;
        flex-direction: column;

        :deep(.el-input__wrapper) {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }

        .content {
          flex: 1;
          padding: 0 0 4px 0;
          display: flex;
          align-items: center;
          min-height: 31.6px;
          flex-wrap: wrap;
        }
      }
    }

    .sub-content {
      padding: 12px;
    }
  }

  .card-demo {
    width: 90%;
    margin-left: 24px;
    margin-bottom: 10px;
    transition-property: all;
  }
  .card-demo:hover {
    //transform: translateY(-4px);
  }

  .contentBox {
    width: 100%;
    .title {
      color: #909399;
      text-align: center;
      font-weight: bold;
    }
    .contentBoxList {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 17px;
      color: #9ca2a9;
    }
  }
  .des1 {
    color: #646a73;
    font-size: 15px;
    margin-left: 30px;
    margin-bottom: 10px;
  }
  .des2 {
    margin-bottom: 5px;
    margin-left: 23px;
    font-size: 18px;
    color: #797f87;
  }
</style>
